<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, computed } from 'vue'
  import taskApi from '@/apis/task.js'
  const id = ref(0)
  const planDepartureTime = ref('')
  onLoad((query) => {
    // 接收url传入的id和planDepartureTime的值
    id.value = query.id
    planDepartureTime.value = query.planDepartureTime
  })

  // 2. 延迟时间的相关逻辑
  // let time = ref('20:00')
  let time = computed(() => {
    let [date, time] = planDepartureTime.value.split(' ') // ['2024-7-17','16:00:00']
    let [h, m] = time.split(':')

    return `${h}:${m}`
  })
  const delayTime = ref('')
  function getTime(e) {
    // console.log(e.detail.value)
    let date = planDepartureTime.value.split(' ')[0]
    delayTime.value = `${date} ${e.detail.value}`
  }

  // 3. 获取用户输入的延迟理由
  const delayReason = ref('')

  // 4. 提交数据给服务器
  async function onFormSubmit() {
    // 参数非空检查
    if (!delayTime.value || !delayReason.value) {
      return uni.utils.toast('时间和理由不能为空', 'error')
    }
    // 提交数据给服务器
    let obj = {
      id: id.value,
      delayTime: delayTime.value,
      delayReason: delayReason.value,
    }
    let res = await taskApi.delay(obj)
    uni.utils.toast('延迟提货成功', 'success')
    uni.switchTab({
      url: '/pages/task/index',
    })
  }
</script>

<template>
  <view class="page-container">
    {{ id }}
    <uni-list :border="false">
      <uni-list-item
        title="原定时间 "
        showArrow
        :rightText="planDepartureTime"
      />
      <uni-list-item title="延迟时间" showArrow>
        <template v-slot:footer>
          <picker
            class="time-picker"
            mode="time"
            :value="time"
            @change="getTime"
          >
            <text>{{ delayTime ? delayTime + ':00' : '不可超过2个小时' }}</text>
          </picker>
        </template>
      </uni-list-item>
      <uni-list-item direction="column">
        <template v-slot:body>
          <view class="textarea-wrapper">
            <textarea
              v-model="delayReason"
              class="textarea"
              placeholder-style="color: #818181"
              placeholder="请输入延迟提货原因"
            ></textarea>
            <text class="words-count">0/50</text>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item :border="false">
        <template v-slot:body>
          <button class="button" @click="onFormSubmit">提交</button>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
